<template>
  <div class="index-page">
    <div class="banner">
      <div class="logo"><img
          src="../include/img/logo.png"
          alt=""
        ></div>
    </div>
    <div class="nav">
      <ul class="clearfix">
        <li class="fl" v-for="(item, index) in items" :key="index" @click="tabItem(index)">
          <img :src='item.src' alt="">
        </li>
      </ul>
    </div>
    <pageFoot footIndex="1"></pageFoot>
  </div>
</template>

<script>
import pageFoot from '@/components/include/footer'
export default {
  components: { pageFoot },
  data () {
    return {
      items: [
        {
          src: require('../include/img/index_ico1.png')
        }, {
          src: require('../include/img/index_ico2.png')
        }, {
          src: require('../include/img/index_ico3.png')
        }, {
          src: require('../include/img/index_ico4.png')
        }
      ]
    }
  },
  mounted: function () {},
  methods: {
    tabItem: function (e) {
      if (e === 0) {
        this.$router.push({
          path: 'index/provideHelp'
        })
      } else if (e === 1) {
        this.$router.push({
          path: 'index/acceptHelp'
        })
      } else if (e === 2) {
        this.$router.push({
          path: 'index/state'
        })
      } else if (e === 3) {
        this.$router.push({
          path: 'index/supervise'
        })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.index-page {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  .logo {
    width: 2.14rem;
    position: absolute;
    left: 50%;
    top: 1.05rem;
    margin-left: -1.07rem;
  }
  .banner {
    height: 5.06rem;
    background: url("../include/img/banner.png") no-repeat center;
    background-size: 100%;
    position: relative;
  }
  .nav {
    margin-bottom: 1.5rem;
    li {
      width: 3.3rem;
      margin-left: 0.3rem;
      margin-top: 0.3rem;
    }
  }
}
</style>
